<template>
  <div class="app-amin">
    <div class="todetail" @click="toDetail">
      详情
      <a-icon type="right" />
    </div>
    <div class="main" ref="chart"></div>
    <!-- <div class="big-main" ref="lianechart"></div> -->
  </div>
</template>
    
    <script>
import * as echarts from "echarts";
import { colorList } from "@/unit/echartsColor";

export default {
  name: "MyData",
  props: {
    initSearchData: {
      type: Object
    },
    initData: {
      type: Array
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.echartsInit();
  },
  watch: {
    initData() {
      this.echartsInit();
    }
  },
  methods: {
    
    echartsInit() {
      let nameList = []
      this.initData.forEach(item => {
        nameList.push(item.name)
      });
      const myChart = echarts.init(this.$refs.chart); //初始化容器
      // 饼图数据
      var data = this.initData
      // 计算总数
      var total = this.initData.reduce((acc, cur) => acc + cur.value, 0);

      // 饼图配置
      var option = {
        tooltip: {
          trigger: "item", // Set trigger to 'item' for pie chart
          formatter: "{b}: {c} ({d}%)" // Display name, value, and percentage
        },
        title: {
          text: "数控系统"
        },
        color: ['#1890ff', 'rgb(109,183,117)', 'rgb(248,181,81)', 'rgb(42,52,243)'],
        legend: {
          orient: "vertical",
          right: '15%',
          top: "center",
          itemWidth: 10,
          align: "left",
          // bottom: "10%", // Adjust the bottom margin here
          itemHeight: 10,
          formatter: function(name) {
            // 在legend后面添加具体数字
            var value = data.find(item => item.name === name).value;
            return `${name}: ${value}`;
          },
          data: nameList
        },

        series: [
          {
            type: "pie",
            radius: ["50%", "60%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true, // 设置为 true 显示 label
              position: "inside", // 设置 label 位置为外部
              formatter: "{d}%" // 显示百分比
            },
            data: data.map((item, index) => {
              // 为每一项指定颜色
              // const colorObj = colorList.find(
              //   colorItem => colorItem.name === item.name
              // );
              // const color = colorObj ? colorObj.color : "auto"; // 如果找不到对应颜色，则使用 'auto'
              return {
                value: item.value,
                name: item.name,
                // itemStyle: {
                //   color: color
                // }
              };
            })
          },
          {
            name: "中间文字",
            z: 100,
            type: "gauge",
            radius: "-50%",
            center: ["30%", "50%"], // 需和type: 'pie'中的center一致
            // 配置中间的数字的样式
            detail: {
              // 调节数字位置
              offsetCenter: [-1, -10],
              color: "#000"
            },

            pointer: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            // 中间的字和数字 数据
            data: [
              {
                value: `${total}`,
                name: "总数",
                title: {
                  // 配置“家居总数”的样式
                  show: true,
                  offsetCenter: [0, "-20%"]
                }
              }
            ]
          }
        ],
        grid: {
          left: 15,
          right: 10, // 调整右侧空间以容纳图例
          bottom: 0,
          top: 20,
          containLabel: true
        }
      };
      myChart.setOption(option);
    },
    toDetail() {
      let params = { ...this.initSearchData };
      params.classType = "数控系统";
      this.$router.push({
        name: "outPutDetail",
        query: params
      });
    }
  }
};
</script>
    <style  scoped>
.app-amin {
  width: 100%;
  margin-top: 15px;
  background: #fff;
  border-radius: 15px;
  padding: 15px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  position: relative;
}
.main {
  width: 100%;
  height: calc(50vh - 120px);
}
.todetail {
  position: absolute;
  cursor: pointer;
  right: 10px;
  font-size: 12px;
  top: 20px;
  z-index: 2;
}
.big-main {
  width: 500px;
  background: #fff;
  height: 300px;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 10px;
}
</style>